<template>
	<view class="JSelectStore">
		<view class="store-change" @click="handleClick">
			<text class="iconfont icon-qiehuancangku"></text>
			<text class="store-name">高碑店仓</text>
			<text>切换 </text>
		</view>

		<!-- <view class="tonWeight">
			<text>剩余吨位：10吨</text>
		</view> -->
	</view>
</template>

<script>
export default {
	name: 'JSelectStore',
	data() {
		return {};
	},
	methods: {
		handleClick() {
			// 这里可以添加点击后的逻辑
			console.log('店铺切换被点击');
		}
	}
};
</script>

<style lang="less">
.JSelectStore {
	display: flex;
	justify-content: space-between;
	color: #333;
	// padding: @page-col-spacing @page-row-spacing;
	.store-change {
		display: flex;
		align-items: center;
		color: #fff;
		line-height: 1;
		background: rgba(0, 0, 0, 0.5);
		padding: 0 20rpx;
		height: 60rpx;
		border-radius: 999rpx;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
		.iconfont {
			margin-right: 10rpx;
			font-size: 28rpx;
		}
		.store-name {
			margin-right: 10rpx;
		}
		text {
			font-size: 28rpx;
			font-weight: 600;
		}
		
	
	}
	.tonWeight {
		display: flex;
		align-items: center;
		background: #fff;
		width: fit-content;
		font-size: 24rpx;
		padding: 0rpx 18rpx;
		font-weight: 600;
		border-radius: 500rpx;
		line-height: 1;
		color: #000;
	}
}
</style>
